<template>
    <div class="list">
        <div class="card" v-for="(item,index) in information" :key="index">
            <img :src="item.pic" alt="">
            <span class="place">{{item.place}}</span>
            <div class="name">{{ item.name }}</div>
            <span class="specliaiPrice">{{
            item.specliaiPrice
            }}</span>
            <div class="price">{{ item.price }}</div>
            <button class="shoping" @click="lingqu(item,index)">{{item.lq? '已抢购':'马上抢'}}</button>
        </div>
    </div>
</template>

<script>
var pic = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202102%2F26%2F20210226073347_50f94.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668240950&t=a5e75c663474fbf7b874b9e7a9324adf'
export default {
    data() {
        return {
            information: [
                {
                    pic, place: '汉堡王|北美新天地餐厅', name: '买1送1明星皇堡│用心火烤肉质紧实鲜嫩多汁爆爆团', specliaiPrice: '爆爆团价', price: '￥25'
                },
                {
                    pic, place: '华莱士·全鸡汉堡|长治路店', name: '华莱士│聚划算单人套餐│进店必选', specliaiPrice: '爆爆团价', price: '￥12.12'
                },
            ]
        }
    },
    methods: {
        lingqu(item, index) {
            item.lq = true;
        }
    }
}


</script>

<style lang='scss' scoped>
.list {
    margin-top: 100px;
}

.list .card {
    height: 200px;
}

.list .card img {
    width: 100px;
    height: 100px;
    float: left;
    margin: 5px;
}

.place {
    font-size: 12px;
    color: #777;
}

.card name {
    font-size: 14px;

}

.shoping {
    float: right;
    background: red;
    color: white;
    flex: 1;
    width: 70px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 15px;
    margin-top: -30px;

}
</style>